<template>
  <div style="padding: 12px 24px">
    <div
      style="display: flex; justify-content: space-between; align-items: center"
    >
      <div style="display: flex; align-items: center; gap: 0px 12px">
        <div style="font-size: 18px; color: #222b3c; font-weight: 500">
          新增校验条件
        </div>
      </div>
      <div>
        <svg class="icon" aria-hidden="true" @click="close">
          <use xlink:href="#icon-cuowu"></use>
        </svg>
      </div>
    </div>
    <div>
      <div
        style="
          display: flex;
          align-items: center;
          margin: 28px 63px;
          height: 54px;
          background: #feefe5;
          border-radius: 12px;
        "
      >
        <div style="width: 95px; margin: 24px 0px 0px 8px">
          <!-- dataIndex: 'formData.controlType', 查询类型 -->
          <a-form-item style="width: 70px; margin-right: 10px">
            <!-- checkType -->
            <!-- <a-select class="custom-select" :disabled="!ros.queryKey" style="background: #F1F7FF;border-radius: 16px;" v-model="ros.queryType" @change="queryTypeChange(ros)"> -->
            <a-select
              class="custom-select"
              v-model="infoCheckAddDTO.checkType"
              style="background: #f1f7ff; border-radius: 16px"
            >
              <a-option value="simple">常规报错</a-option>
              <a-option value="alert">预警报错</a-option>
            </a-select>
          </a-form-item>
        </div>
        <div style="width: 183px; margin-left: 20px">
          不满足校验条件时报错：
        </div>
        <div style="flex: 1; margin-right: 16px">
          <a-input placeholder="请输入" v-model="infoCheckAddDTO.errorMsg">
            <template #suffix>
              <div
                style="
                  background: #fc8334;
                  width: 54px;
                  height: 24px;
                  border: 1px solid #fc8334;
                  border-radius: 6px;
                  font-weight: 400;
                  color: #ffffff;
                  font-size: 14px;
                  text-align: center;
                  cursor: pointer;
                "
                @click="save"
              >
                生成
              </div>
            </template>
          </a-input>
        </div>
        <a-checkbox
          v-model="infoCheckAddDTO.type"
          @change="!infoCheckAddDTO.type"
        >
          精准报错
        </a-checkbox>
        <a-popover placement="br">
          <template #title>
            <div style="width: 440px; height: 230px; padding: 10px 16px">
              <div
                style="
                  color: #646a73;
                  font-size: 14px;
                  font-weight: 400;
                  margin-bottom: 8px;
                "
              >
                精准报错示例
              </div>
              <div
                style="
                  width: 100%;
                  height: 74px;
                  padding: 12px;
                  background: #fef7f2;
                  border-radius: 6px;
                  border: 1px solid rgba(253, 177, 128, 0.8);
                "
              >
                <div style="color: #222b3c">
                  <svg
                    class="icon"
                    aria-hidden="true"
                    style="color: #fc8334; font-size: 14px; font-weight: 400"
                  >
                    <use xlink:href="#icon-tishi"></use>
                  </svg>
                  数据结果验证失败
                </div>
                <div style="padding-left: 10px">
                  「姓名」数据结果为「有值」时，展示字段「手机号码」
                </div>
              </div>
              <div
                style="
                  color: #646a73;
                  font-size: 14px;
                  font-weight: 400;
                  margin-top: 20px;
                  margin-bottom: 8px;
                "
              >
                默认报错示例
              </div>
              <div
                style="
                  width: 100%;
                  height: 74px;
                  padding: 12px;
                  background: #fef7f2;
                  border-radius: 6px;
                  border: 1px solid rgba(253, 177, 128, 0.8);
                "
              >
                <div style="color: #222b3c">
                  <svg
                    class="icon"
                    aria-hidden="true"
                    style="color: #fc8334; font-size: 14px; font-weight: 400"
                  >
                    <use xlink:href="#icon-tishi"></use>
                  </svg>
                  数据结果验证失败
                </div>
              </div>
            </div>
          </template>
          <div style="margin-right: 8px">
            <svg
              class="icon"
              aria-hidden="true"
              style="color: #97999c; font-size: 14px; font-weight: 400"
            >
              <use xlink:href="#icon-jieshishuoming"></use>
            </svg>
          </div>
        </a-popover>
      </div>
      <div></div>
    </div>
    <div
      class="displayFlex"
      style="margin: 0px 63px; justify-content: flex-start"
    >
      <!-- placement="bottom"  -->
      <a-popover trigger="click" v-model:popup-visible="filterTypeShow">
        <div
          @click="filterTypeShow = true"
          style="
            display: flex;
            justify-content: space-between;
            align-items: center;
            justify-content: center;
            width: 130px;
            height: 32px;
            background: #e8f2ff;
            border-radius: 16px;
            border: 1px solid #d8e8fd;
            margin-right: 20px;
          "
        >
          <!-- 数据格式(邮件) -->
          <div
            v-text="
              infoCheckAddDTO.checkRule
                ? menuList.find(
                    (item) => infoCheckAddDTO.checkRule === item.checkRule
                  ).title
                : menuList[0]?.title
            "
          ></div>
          <svg class="icon" style="margin-left: 3px" aria-hidden="true">
            <use xlink:href="#icon-shaixuan"></use>
          </svg>
        </div>
        <template #content style="padding: 0px">
          <div style="padding: 6px 0px">
            <div
              class="menuItem"
              @click="
                ((filterTypeShow = false),
                (infoCheckAddDTO.checkRule = item.checkRule),
                (infoCheckAddDTO.conditionDTO = [{}]))
              "
              v-for="(item, index) in menuList"
              :key="index"
            >
              <div class="checkRule">{{ item.title }}</div>
              <div style="color: #a1a5ae; font-size: 12px; font-weight: 400">
                {{ item.description }}
              </div>
            </div>
          </div>
        </template>
      </a-popover>
      <!-- <condition :checkRule="checkRule"/> -->
      <condition
        :checkRule="infoCheckAddDTO.checkRule"
        :conditionDTO="infoCheckAddDTO.conditionDTO"
      />
    </div>
  </div>
</template>

<script>
// import { nanoid } from 'nanoid'
import condition from "@/components/Form/verification/condition.vue";
import { menuList } from "@/components/Form/base/options";

// checkRule checkRule
export default {
  name: "VerificationListAdd",
  components: {
    condition,
  },
  inject: ["dataObj"],
  props: {
    infoCheckAddDTO: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      visible: false,
      filterTypeShow: false,
      menuList: menuList,
      labelCol: { span: 8 },
      wrapperCol: { span: 16 },
    };
  },
  // columnStyle
  mounted() {
    console.log(this.infoCheckAddDTO, "this.infoCheckAddDTO");
    if (!this.infoCheckAddDTO.checkRule) {
      // 默认为数据结果时处理
      this.infoCheckAddDTO.checkRule = "result";
    }
  },
  methods: {
    save() {
      this.$emit("ok", { infoCheckAddDTO: this.infoCheckAddDTO });
    },
    close() {
      this.$emit("close", { infoCheckAddDTO: this.infoCheckAddDTO });
    },
  },
};
</script>

<style lang="less" scoped>
.addButton {
  width: 70px;
  height: 30px;
  cursor: pointer;
  background: #ffffff;
  border-radius: 15px;
  border: 1px solid #2983ff;
  display: flex;
  align-content: center;
  justify-content: space-evenly;
}

.conditionList {
  display: flex;
  align-content: center;
  // justify-content: space-evenly;
  width: 100%;
  flex-wrap: wrap;
  height: 30px;
  padding: 0px 77px;
  background: #f7f8fa;
  border-radius: 6px;
}

.conditionGroup {
  background: #fafbfd;
  border-radius: 8px;
  padding: 8px;
  margin: 14px 0px;
  font-size: 14px;
  font-weight: 400;
  color: #222b3c;
}

/deep/ .custom-select .arco-select-view {
  border-radius: 16px !important; /* 设置圆角半径 */
  background: #f1f7ff !important;
  border: 1px solid #d8e8fd !important;
}

/deep/ .custom-select .arco-select-view:hover {
  background: #ffffff !important;
}

.custom-div {
  border-left: 1px solid #bfbfbf; /* 左侧边框 */
  border-top: 1px solid #bfbfbf; /* 上侧边框 */
  border-bottom: 1px solid #bfbfbf; /* 下侧边框 */
  border-top-left-radius: 15px; /* 左上角圆角 */
  border-bottom-left-radius: 15px; /* 左下角圆角 */
  width: 30px;
  margin: 16px 0px 20px 16px;
  position: relative; /* 设置父元素为相对定位，使子元素可以绝对定位 */
}

.child-div {
  width: 25px;
  height: 25px;
  line-height: 13px;
  position: absolute; /* 绝对定位 */
  top: 50%; /* 垂直居中 */
  left: -13px; /* 左边线 */
  transform: translateY(-50%); /* 垂直居中调整 */
  padding: 5px; /* 子元素内边距 */
  background-color: #ffffff; /* 子元素背景色 */
  border: 1px solid #bfbfbf;
  border-radius: 7px;
  font-weight: 500;
  // cursor: pointer;
}

.drag-handle {
  display: flex;
  align-content: left;
  align-items: center;
  margin-right: 4px;
}

.icon {
  font-size: 12px;
  color: #646a73;
  cursor: pointer;
}

.icon:hover {
  color: #2983ff; /* 悬停后的颜色 */
}

.delIcon {
  line-height: 34px;
  cursor: pointer;
  color: #97999c;
  font-size: 12px;
}

.delIcon:hover {
  color: red; /* 悬停后的颜色 */
}

.addIcon {
  line-height: 33px;
  cursor: pointer;
  color: #97999c;
  font-size: 12px;
}

.addIcon:hover {
  color: #2983ff; /* 悬停后的颜色 */
}

.switch {
  display: flex;
  width: 88px;
  border-radius: 16px;
  background: #f0f2f5;
  cursor: pointer;
}

.switchLeft {
  width: 44px;
  height: 26px;
  border-radius: 16px;
  background: #ffffff;
  margin: 2px 0px 2px 2px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.switchRight {
  width: 44px;
  height: 26px;
  border-radius: 16px;
  margin: 2px 2px 2px 0px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/deep/ .arco-drawer {
  border-radius: 16px 16px 0px 0px;
}

/deep/ .arco-drawer-body {
  padding: 0px;
}

.displayFlex {
  display: flex;
  align-items: center;
  justify-content: center;
}

.menuItem {
  padding: 4px;
  border-radius: 6px;
  cursor: pointer;
}

.checkRule {
  color: #222b3c;
  font-size: 14px;
  font-weight: 400;
}

.menuItem:hover {
  background: #f1f7ff;
}

.menuItem:hover .checkRule {
  color: #2983ff; /* 鼠标悬停时改变描述文字颜色 */
}

/deep/ .arco-popover-title {
  border-bottom: none;
}

::deep(.arco-popover-content) {
  display: none !important;
}
//   /deep/ .custom-select .arco-select-view {
//     border-radius: 16px !important; /* 设置圆角半径 */
//     background: #F1F7FF !important;
//     border: 1px solid #D8E8FD !important;
//  }

//   /deep/ .custom-select .arco-select-view:hover {
//       background: #ffffff !important;
//       border: 1px solid #1890ff !important;
//   }
</style>
